<template>
    <div id="navbar">
        <nav class="bg-white shadow-md fixed top-0 left-0 right-0 z-50">
            <div class=" mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16 items-center">
                    <div class="flex items-center">
                        <a href="#" class="text-lg font-bold text-gray-900">GWDI智能助手</a>
                    </div>
                    <div class="flex items-center space-x-4">
                        <a @click="gotoHome" class="text-gray-600 hover:text-gray-900 nav-link">
                            <i class="fa-solid fa-house"></i>
                            <span class="ml-1">首页</span>
                        </a>

                        <el-popover class="box-item" :title="adminStore.getUsername" content="当前剩余token：
                        1150" placement="bottom">
                            <template #reference>
                                <a href="#" class="text-gray-600 hover:text-gray-900 nav-link">
                                    <i class="fa-solid fa-user"></i>
                                    <!-- 用户头像 -->
                                    <div class="flex items-center space-x-2">
                                        <img src="../../../assets/hongA.png"
                                            class="w-6 h-6 sm:w-10 sm:h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    </div>
                                    <span class="ml-1">个人中心</span>
                                </a>
                            </template>
                        </el-popover>
                        <a v-if="adminStore.getRole < 2" @click="gotoSetting"
                            class="text-gray-600 hover:text-gray-900 nav-link">
                            <i class="fa-solid fa-gear"></i>
                            <span class="ml-1">设置</span>
                        </a>
                        <a @click="logout" class="text-gray-600 hover:text-gray-900 nav-link">
                            <i class="fa-solid fa-right-from-bracket"></i>
                            <span class="ml-1">退出登录</span>
                        </a>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { useAdminApi } from '../../../api/admin';
import { useAdminInfoStore } from '../../../store';
import { useRouter } from 'vue-router';

const adminApi = new useAdminApi();
const adminStore = useAdminInfoStore();
const router = useRouter();
// 登出接口
const logout = () => {
    adminApi.logout().then(response => {
        if (response.data.code == 1) {
            // 登出成功
            ElMessage.success("登出成功！");
            adminStore.setLoginStatus(false);
            router.push('/login');
        } else {
            ElMessage.error(response.data.message);
        }
    }).catch(error => {
        console.error(error);
    });
}

const gotoSetting = () => {
    router.push('/setting')
}

const gotoHome = () => {
    window.location.href = 'https://www.internet3.com.cn/frontend/';
}
</script>

<style scoped>
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #007BFF;
    transition: width 0.3s ease, left 0.3s ease;
}

.nav-link:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.nav-link:hover::after {
    width: 100%;
    left: 0;
}
</style>